<template>
	<view class="tree-item">
		<view class="tree-item-header">
			<uni-icons v-if="data[childrenKey] && data[childrenKey].length" class="left-icon" :type="open ?'arrowdown':'arrowright'" @click="open=!open"></uni-icons>
			<view :class="{'disable':data[disable]}" class="tree-item-label" hover-class="hover"  @click="itemClick"> 
				<text v-if="data[jointkey]" style="color:#999">{{data[jointkey]}} </text>
				{{data[dataKey]}}
			 </view>
			<slot :item="data" :path="[]"></slot>
		</view>
		<TreeItem v-on="$listeners" v-if="data[childrenKey]" v-show="open" v-for="(item,index) in data[childrenKey]"
			:key="arrayKey?item[arrayKey]:index" :data="item" :dataKey="dataKey" :arrayKey="arrayKey"
			:childrenKey="childrenKey"  :slotKey="slotKey" :jointkey="jointkey" >
			<template v-slot="slotData">
				<slot :item="slotData.item" :path="[item,...slotData.path]"></slot>
			</template>
		</TreeItem> 
		
		<view v-if="!data[childrenKey]  && slotKey.length" class="card"  @click="itemClick">
			<view class="bubble"></view>
			<view v-for="(slot,slotIndex) in slotKey"  class="cu-line" :key="slotIndex">
				<view class="title">{{slot.title}}</view>
				<view class="value">{{data[slot.key] || ''}}</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name: "TreeItem",
		data() {
			return {
				open: false
			}
		},
		props: {
			data: {
				default: function() {
					return {}
				}
			},
			dataKey: {
				default: "label"
			},
			arrayKey: {

			},
			childrenKey: {
				default: "children"
			},
			jointkey:{
				default: ""
			},
			disable:{
				type: String,
				default: 'disable'
			},
			slotKey: {
				default: function() {
					return []
				}
			}
		},
		methods: {
			itemClick() {
				this.$emit('itemClick', this.data)
			}
		}

	}
</script>

<style>
	.tree-item {
		width: calc(100% - 20rpx);
		padding-left: 20rpx;
	}
	.tree-item-header {
		width: 100%;
		display: flex;
		flex-direction: row;
		line-height: 60rpx;
	}
	.tree-item-label{
		margin-left: 20rpx;
		flex: 1;
		font-size: 30rpx;
	}
	.card{
		background: #eee;
		padding: 10rpx;
		margin: 10rpx 25rpx;
		border-radius: 10rpx;
		position: relative;
	}
	.bubble {
		position: absolute;
		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
		top: -6px;
		left: 5%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #eee;
	}
	.bubble:after {
		content: " ";
		position: absolute;
		width: 0;
		height: 0;
		left: 6%;
		bottom: -20rpx;
		border-top: 20rpx solid transparent; 
		border-right: 20rpx solid transparent;
		border-left: 20rpx solid transparent;
		border-bottom: 20rpx solid #eee;
	}
	.disable{
		color: #999;
	}
	.hover{
		background: #fbfbfb;
	}
	.left-icon{
		font-size: 30rpx;
	}
	.cu-line{
		display: flex;
		flex: row;
		justify-content: flex-start;
		margin: 10rpx;
	}
</style>
